<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2019-10-19 20:51:45
 -->
<template>
  <div class="container">
    <div class="view">
      <div class="top tr">
        <el-button type="primary"
                   size="small"
                   @click="addTableList">添加</el-button>
        <el-button size="small"
                   @click="goback">返回</el-button>
      </div>
      <div class="table">
        <el-scrollbar :native="false"
                      tag="section"
                      class="el-scroll">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    v-loading="Loading"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(21, 29, 54, 0.8)"
                    border
                    highlight-current-row>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="dictId"
                             label="序号">
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="dictName"
                             label="名称">
              <template slot-scope="scope">
                <span>{{scope.row.dictName}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             :show-overflow-tooltip="true"
                             prop="createTime"
                             label="创建时间">
            </el-table-column>
            <el-table-column label="操作"
                             width="250px"
                             align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           @click="rewriteTableList(scope.row)">修改</el-button>
                <el-button size="mini"
                           type="danger"
                           @click="deleteTableList(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="bottom">
        <el-pagination layout="total, sizes, prev, pager, next"
                       background
                       :page-count="10"
                       :page-sizes="[5, 10, 20, 40]"
                       :page-size="page.pageSize"
                       :total="page.total"
                       :current-page="page.pageNum"
                       @current-change="changePage"
                       @size-change="sizeChange"></el-pagination>
      </div>
    </div>
    <!-- 点击添加按钮  弹窗 -->
    <el-dialog title="添加字典表类型"
               :visible.sync="addTableShow"
               width="30%">
      <el-form :model="addListForm"
               ref="addFormRefs"
               :rules="addFormRules"
               class="demo-form-inline">
        <el-form-item label="名称："
                      prop="dictName">
          <el-input v-model="addListForm.dictName"
                    placeholder="名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="上级名称："
                      prop="pid">
          <el-select v-model="addListForm.createTime">
            <el-option :label="item.dictName"
                       v-for="item in selectList"
                       :key="item.dictId"
                       :value="item.dictId"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addTableShow = false;addListForm={dictName:'',pid: ''}">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击修改按钮  弹窗 -->
    <el-dialog title="修改字典表类型"
               :visible.sync="writeTableShow"
               width="30%">
      <el-form :model="writeListForm"
               class="demo-form-inline">
        <el-form-item label="名称："
                      prop="dictName">
          <el-input v-model="writeListForm.dictName"
                    placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="上级名称：">
          <el-select v-model="writeListForm.parentId">
            <el-option :label="item.dictName"
                       v-for="item in selectList"
                       :key="item.dictId"
                       :value="item.dictId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="writeTableShow = false;writeListForm={dictName:'',dictId: ''}">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitWriteForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'DictionaryTypeView',
  props: {
    tableData: {
      type: Array,
      default: () => { }
    },
    label: [],
    page: {
      type: Object,
      default: () => { }
    },
    selectList: {
      type: Array,
      default: () => { }
    }
  },
  data () {
    return {
      addFormRules: {
        dictName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        pid: [
          { required: true, message: '请选择上级名称', trigger: 'blur' },
        ]
      },
      Loading: false,
      addTableShow: false,
      addListForm: {
        dictName: '',
        pid: ''
      },
      writeTableShow: false,
      writeListForm: {
        dictName: '',
        dictId: ''
      }
    }
  },
  methods: {
    //  点击返回按钮
    goback () {
      this.$router.push({
        path: `/${_routerPath.routerName}/DictionaryTable/DictionaryTableIndex`,
      })
    },
    //  点击修改按钮
    rewriteTableList (data) {
      console.log(data)
      this.writeTableShow = true
      data = Object.assign({}, data)
      this.writeListForm = data
    },
    // 修改界面点击确定
    onSubmitWriteForm () {
      console.log(this.writeListForm)
      this.$emit('onSubmitWriteForm', this.writeListForm)
      this.writeTableShow = false
    },
    //  点击分页按钮
    changePage (pageSize) {
      console.log(pageSize)
      this.$emit('changePage', pageSize)
    },
    //  切换页数
    sizeChange (pageNum) {
      console.log(pageNum)
      this.$emit('sizeChange', pageNum)
    },
    // 点击删除按钮
    deleteTableList (data) {
      console.log(data)
      this.$emit('deleteTableList', data)
    },
    //  点击添加按钮
    addTableList () {
      this.addTableShow = true
    },
    //  表单点击确定按钮
    onSubmitForm () {
      console.log(this.addListForm)
      this.$refs.addFormRefs.validate((valid) => {
        if (valid) {
          this.$emit('onSubmitForm', this.addListForm)
          this.addTableShow = false
        }
      })
    },

  }
}
</script>
<style scoped>
@import url("DictionaryType.less");
</style>